/**
 * Copyright (C) <2023> <Boundivore> <boundivore@foxmail.com>
 * <p>
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the Apache License, Version 2.0
 * as published by the Apache Software Foundation.
 * <p>
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * Apache License, Version 2.0 for more details.
 * <p>
 * You should have received a copy of the Apache License, Version 2.0
 * along with this program; if not, you can obtain a copy at
 * http://www.apache.org/licenses/LICENSE-2.0.
 */
/**
 * 修改配置文件页面
 * @author Tracy
 */
import React, { useState, useRef } from 'react';
import { Col, Row, Flex, message } from 'antd';
import { Resizable } from 're-resizable';
import ContainerCard from '@/components/containerCard';
import FileList from './components/fileList';
import { GroupManager } from './components/groupManager';
import { FileContent } from './components/fileContent';
import { ConfigStateProvider } from './contexts/configStateContext';
interface RefType {
	getFileContent: () => void;
	[property: string]: any;
}
const ModifyConfig: React.FC = () => {
	const [messageApi, contextHolder] = message.useMessage();
	const [width, setWidth] = useState(300);
	const fileListRef = useRef<RefType>(null);
	const callback = () => fileListRef.current?.getFileContent();

	return (
		<ConfigStateProvider>
			<ContainerCard>
				{contextHolder}
				<Flex gap="middle" className="w-[100%] overflow-hidden">
					<Resizable
						size={{ width, height: 'auto' }}
						onResizeStop={(_e, _direction, _ref, d) => {
							setWidth(width + d.width); // 更新宽度
						}}
						enable={{
							right: true // 只允许从右侧拖动
						}}
						minWidth={380}
						maxWidth={450}
					>
						<FileList messageApi={messageApi} ref={fileListRef} />
					</Resizable>
					<Row className="w-[100%] h-[100%] min-w-[1px]">
						<Col span={4}>
							<GroupManager />
						</Col>
						<Col className="min-h-[600px]" span={20}>
							<FileContent messageApi={messageApi} callback={callback} />
						</Col>
					</Row>
				</Flex>
			</ContainerCard>
		</ConfigStateProvider>
	);
};

export default ModifyConfig;
